<!--脚本部分-->
<script setup>
// 导入Vue的响应式API
import { reactive, ref } from 'vue';
// 导入路由实例
import router from '@/router'
// 导入状态管理(adminStore用于管理员信息，tokenStore用于令牌管理)
import { adminStore, tokenStore }  from '../store';
// API调用模块
import adminApi from '@/api/adminApi';

// 取出当前登录用户的信息
const loginAdmin = ref({
    name: "未登录",
});

getLoginAdmin();

function getLoginAdmin() {
    adminApi.getLoginAdmin().then(result=>{
        console.log("获取登录信息",result);
        if (result.code == 200) {
            loginAdmin.value = result.data;
        } else {
            router.push('/login')
        }
    });
}
// 菜单  用户管理， 分类管理， 商品管理
// ref创建响应式的菜单数据
const menuData = ref([
    {name: '预约管理', icon: 'GobletFull', children: [
        {name: '预约列表', icon: 'GobletSquareFull', path: "/reserve"},
        {name: '数据统计', icon: 'TrendCharts', path: "/charts"},
    ]},
    {name: '课程管理', icon: 'Notebook', children: [
        {name: '课程列表', icon: 'Document', path: "/course"},
        {name: '课程日历', icon: 'Calendar', path: "/courseCalendar"},
    ]},
    {name: '会员管理', icon: 'User', children: [
        {name: '会员列表', icon: 'UserFilled', path: "/member"},
    ]},
    {name: '教练管理', icon: 'Avatar', children: [
        {name: '教练列表', icon: 'List', path: "coach"},
    ]},
    {name: '管理员管理', icon: 'Lock', children: [
        {name: '管理员列表', icon: 'Setting', path: "admin"},//该子菜单对应的路由路径
    ]},
]);

//左侧菜单动作：点击左侧菜单中的子项时，自动跳转到该菜单项对应的路由页面
//函数接受一个key参数，由被选中菜单项的index属性值做参，其中index绑定了child.path
function handleMenu(key) {
    if(key) {
        //路由跳转
        router.push(key)
    }
}

// 右上角的下拉选
function handleSelect(key) {
    // console.log(key)
    if (key == 'logout') {
        // 退出
        logout();
    }
}

function logout() {
    // 更新Pinia中的登录数据
    //adminStore().update(null);  
    tokenStore().update(null);
    router.push('/login')   
}
</script>
<!--模板部分-->
<template>
    <div class="common-layout">
        <el-container><!-- 容器组件 -->
            <el-aside :width="1"><!-- 侧边栏 -->
                <div style="height: 60px;line-height: 60px; text-align: right; color: #FFF; font-size: 20px; margin-right: 24px;">
                    <el-icon @click="isCollapse=!isCollapse">
                        <Expand v-if="isCollapse"></Expand>
                        <Fold v-else></Fold>
                    </el-icon> 
                </div>
                <!-- el-menu和el-sub-menu构建多级菜单，
                active-text-color：菜单项被激活（选中）时，文本的颜色
                background-color：菜单背景色
                class：自定义CSS类名
                default-active：默认激活的菜单项，赋值为ref创建的menuData中的path，如果想要展示管理员列表，直接"admin"
                text-color：菜单项未激活时的文本颜色
                :collapse：控制菜单是否折叠
                @select="handleMenu"：select事件与函数绑定，路由跳转 -->
                <el-menu active-text-color="#ffd04b" background-color="#0c1d40" class="el-menu-vertical-demo"
                    default-active="/charts" text-color="#fff" :collapse="isCollapse"
                    @select="handleMenu">
                    <!-- v-for动态生成菜单 -->
                    <el-sub-menu v-for="(menu, index) in menuData" :index="index.toString()">
                        <template #title>
                            <!-- 动态组件渲染不同图标 -->
                            <component
                                class="icons"
                                :is="menu.icon"
                                style="width: 1em; height: 1em; margin-right: 8px" >
                            </component>
                            <span>{{ menu.name }}</span>
                        </template>
                        <el-menu-item v-for="(child, ind) in menu.children" :index="child.path">
                            <el-icon><component 
                                :is="child.icon">
                            </component></el-icon>
                            <span>{{ child.name }}</span>
                        </el-menu-item>
                    </el-sub-menu>
                </el-menu>
            </el-aside>
            <el-container>
                <el-header><!-- 顶部导航栏 -->
                    <el-menu :default-active="activeIndex" 
                        class="el-menu-demo" 
                        mode="horizontal" 
                        :ellipsis="false"
                        background-color="#f3f7ff"
                        text-color="#393939" 
                        active-text-color="#ffd04b"
                        @select="handleSelect">

                        <el-menu-item index="0">
                            <img style="height: 80%" src="@/assets/logo.png" alt="中享思途" />
                            <span style="padding-left: 50px; font-size: 24px; color:#393939;">思泰隆-健身房课程预约系统(STL-gym)</span>
                        </el-menu-item>
                        <div class="flex-grow" />                        
                        <el-sub-menu index="1">
                            <template #title>
                                <el-icon><Stamp></Stamp></el-icon>
                                {{ loginAdmin?loginAdmin.name:'没登录' }}
                            </template>
                            <el-menu-item index="1-1">修改信息</el-menu-item>
                            <el-menu-item index="1-2">重置密码</el-menu-item>
                            <el-menu-item index="logout">退出
                                <el-icon><SwitchButton></SwitchButton></el-icon>
                            </el-menu-item>
                        </el-sub-menu>
                    </el-menu>
                </el-header>
                <el-main><!-- 主内容区 -->
                    <router-view></router-view><!--显示当前路由对应的组件-->
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>
<!--样式部分-->
<style>
.flex-grow {
  flex-grow: 1;
}

.common-layout,
.el-container {
    height: 100%;
}

.el-header {
    --el-header-padding: 0;
    --el-header-height: 80px;
    box-sizing: border-box;
    flex-shrink: 0;
    height: var(--el-header-height);
    padding: var(--el-header-padding);
}

.el-menu--horizontal {
    height: 80px;
}

.el-aside {
    background-color: #0c1d40;
}

.el-main{
    padding: 0px;
}

.el-menu{
    border-width: 0px;
}
.el-menu-item{
    font-size: 16px;
}
.el-menu-demo{
    box-shadow: 0 2px 4px rgba(0,0,0,0.25);
}

.el-sub-menu__title{
    font-size: 16px;
}

</style>